<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
        <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="MobileOptimized" content="320">
<title>刮刮乐</title>
<script src="<%=basePath%>guaguale/jquery-1.8.2.min.js"></script>
<script src="<%=basePath%>guaguale/jquery.mobile-1.2.0.min.js"></script>

<style>
	body{
		margin:0 auto;background:url("<%=basePath%>guaguale/s_bd.jpg");	}
	.margin{margin:0 auto;}
	.box{text-align:center; width:100%; }
	.box img{width:300px; height:120px;}
	.box .canvasbg{padding-left: 8px;background:url("<%=basePath%>guaguale/s_stamp.png") no-repeat ; height:157px; width:290px; background-size:100% 100%;}
	.box .tip{ background:url("<%=basePath%>guaguale/s_tip_bd.png") no-repeat ; height:100px; width:300px; background-size:100% 100%;}
	.box .tip .font{ padding:7% 5% 2% 20%; text-align:left} 
	a{color:#FFF;font-family:"\5fae\8f6f\96c5\9ed1"}
	.zj{ width: 285px;height: 153px;background:url("<%=basePath%>${randomfilepath }") no-repeat ;}
</style>
<script>

	window.onload = function(){
		init();

        $("#duibutton").on("click",
                function() {
                    alert(count);
                    if(count>5){

                        $.post("<%=basePath%>gglController/dui",{random:Math.random(),number:$("#number").val(),filename:$("#filename").val(),isvalibe:$("#isvalibe").val(),userid:$("#userid").val()},function(rs){
                            var msg=eval("("+rs+")");
                            var cont=msg;

                            var contnet=cont.replace(/\\"/g, "\'");
                            var c=eval("("+contnet+")");

                            alert(c.msg);
                        });
                    }else{
                        alert("看不清楚哟!@!");
                    }

                }
        )
	}
	var imageWidth = "280";
	var imageheight = "140";
	function init(){
		//定义绘画宽 高
	
		//定义Canvas对象
		var Canavas = document.getElementById("CanvasLe");
		var Context2D = Canavas.getContext("2d");
		//var img = new Image();
		//img.src ="zj.png";
		
		var bool =true;
		Context2D.fillStyle='#cccccc';	//设置覆盖层的颜色
		Context2D.fillRect(0,0,imageWidth,imageheight);	//设置覆盖的区域
		
		//触发触屏滑动事件
		Canavas.addEventListener('touchmove', function(event) {
				 // 如果这个元素的位置内只有一个手指的话
				if (event.targetTouches.length == 1) {
			　　　　 event.preventDefault();// 阻止浏览器默认事件，重要 
					var touch = event.targetTouches[0];
					// 把元素放在手指所在的位置
					var canvasOffset = $(Canavas).offset();
					var canvasX = Math.floor(touch.pageX - canvasOffset.left);
					var canvasY = Math.floor(touch.pageY - canvasOffset.top);
				    //$("#touchCoordinate").text("x:"+ canvasX +"  y:"+canvasY);
					  lottery(touch.pageX,touch.pageY,Context2D);
					}
			}, false);
		//增加Canvas鼠标滑动事件
		Canavas.onmousemove = function(e) {
			var canvasOffset = $(Canavas).offset();
			var canvasX = Math.floor(e.pageX - canvasOffset.left);
			var canvasY = Math.floor(e.pageY - canvasOffset.top);
			canvasY += parseInt(imageheight);
			lottery(canvasX,canvasY,Context2D);
		}
	}
	//记录是否刮过此次大于多少可以兑奖
	var count=0;
	
	//刮刮函数
	function lottery(x,y,c){
		c.clearRect(x,y-imageheight,20,20);
		count++;
	}



    $(document).bind('pageinit', function() {
        $('#duibutton').bind('click', function(e) {

            if(count>5){

                $.post("<%=basePath%>gglController/dui",{random:Math.random(),number:$("#number").val(),filename:$("#filename").val(),isvalibe:$("#isvalibe").val(),userid:$("#userid").val()},function(rs){
                    var msg=eval("("+rs+")");
                    var cont=msg;

                    var contnet=cont.replace(/\\"/g, "\'");
                    var c=eval("("+contnet+")");

                    alert(c.msg);
                });
            }else{
                alert("看不清楚哟!@!");
            }
        });
    });

</script>
</head>
<body>
	<div class="box">
    	<img src="<%=basePath%>guaguale/s_title.png" />
        <div class="margin canvasbg " style="padding-top: 4px;">
             <div class="zj">
        	<canvas id="CanvasLe" width="280" height="140" style="margin-top:7px;"></canvas>
            </div>
        </div>
        <div class=" margin tip">
        	<div class="font">
            	<a>想提高中奖率？</a><br/>
            	<a>就来刮刮乐</a>
            	<a href="javascript:void(0);" id="duibutton">我要兑奖</a>
            </div>
        </div>
        <!--<div id="touchCoordinate"></div>-->
    </div>
    <input type="hidden" id="number" value="${number }"/>
    <input type="hidden" id="filename" value="${filename }"/>
    <input type="hidden" id="isvalibe" value="${isvalibe }">
    <input type="hidden" id="userid" value="${userid }"/>
</body>
</html>
